<!--
 * Description: ProjectTempModel页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Chengming.Li
 * Date: 2020/11/18 11:40
-->
<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="medium">
          <el-row>
            <!--temp-model编号-->
            <!-- <el-col :span="8">
              <el-form-item label="Temp-Model">
                <el-input v-model="queryForm.tempModel" clearable />
              </el-form-item>
            </el-col> -->
            <!--number-->
            <el-col :span="8">
              <el-form-item label="Number">
                <el-input v-model="queryForm.number" clearable />
              </el-form-item>
            </el-col>

            <!--事业部-->
            <el-col :span="8">
              <el-form-item :label="$t('Project.bu')">
                <el-input v-model="queryForm.bu" clearable />
              </el-form-item>
            </el-col>

            <!--所属机种id-->
            <el-col :span="8">
              <el-form-item label="所属机种">
                <el-input v-model="queryForm.modelOid" clearable />
              </el-form-item>
            </el-col>

            <!--所属机种名称-->
            <el-col :span="8">
              <el-form-item label="所属机种名称">
                <el-input v-model="queryForm.modelName" clearable />
              </el-form-item>
            </el-col>

            <!--系列-->
            <el-col :span="8">
              <el-form-item :label="$t('Project.series')">
                <el-input v-model="queryForm.series" clearable />
              </el-form-item>
            </el-col>

            <!--系列id-->
            <el-col :span="8">
              <el-form-item label="系列ID">
                <el-input v-model="queryForm.seriesId" clearable />
              </el-form-item>
            </el-col>

            <!--project-->
            <el-col :span="8">
              <el-form-item label="项目">
                <el-input v-model="queryForm.project" clearable />
              </el-form-item>
            </el-col>

            <!--project id-->
            <el-col :span="8">
              <el-form-item label="专案ID">
                <el-input v-model="queryForm.projectOid" clearable />
              </el-form-item>
            </el-col>

            <!--PM-->
            <el-col :span="8">
              <el-form-item :label="$t('Project.pm')">
                <el-input v-model="queryForm.pmName" clearable />
              </el-form-item>
            </el-col>
            <!-- 是否删除 -->
            <el-col :span="8">
              <el-form-item label="是否删除">
                <el-select
                  v-model="queryForm.deleted"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('YnNum')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!--间隔时间-->
            <el-col :span="8">
              <el-form-item label="间隔时间">
                <el-input v-model="queryForm.remind" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--专案数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--temp model编号列-->
        <!-- <el-table-column
          align="center"
          label="Temp-Model编号"
          min-width="250px"
          prop="tempModel"
          sortable
        /> -->
        <!--number列-->
        <el-table-column align="center" label="Number" min-width="250px" prop="number" sortable />

        <!--事业部-->
        <el-table-column
          align="center"
          :label="$t('Project.bu')"
          min-width="150px"
          prop="bu"
          sortable
        />
        <!--所属机种id列-->
        <el-table-column
          align="center"
          label="所属机种"
          min-width="250px"
          prop="modelOid"
          show-overflow-tooltip
          sortable
        />
        <!--所属机种名称列-->
        <el-table-column
          align="center"
          label="所属机种名称"
          min-width="150px"
          prop="modelName"
          show-overflow-tooltip
          sortable
        />

        <!--系列-->
        <el-table-column
          align="center"
          :label="$t('Project.series')"
          min-width="180px"
          prop="series"
          sortable
        />
        <!--系列Id-->
        <el-table-column align="center" label="系列ID" min-width="180px" prop="seriesId" sortable />

        <!--project-->
        <el-table-column align="center" label="项目" min-width="200px" prop="project" sortable />

        <!--project id-->
        <el-table-column
          align="center"
          label="专案ID"
          min-width="250px"
          prop="projectOid"
          sortable
        />

        <!--项目经理列-->
        <el-table-column
          align="center"
          label="项目经理"
          min-width="150px"
          prop="pmName"
          sortable
        ></el-table-column>
        <!--间隔天数列-->
        <el-table-column align="center" label="间隔天数" min-width="150px" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.remind === null">无</span>
            <span v-else>{{ scope.row.remind }}天</span>
          </template>
        </el-table-column>
        <!--备注列-->
        <el-table-column
          align="center"
          label="备注"
          min-width="200px"
          prop="remark"
        ></el-table-column>
        <!--摘要列-->
        <el-table-column
          align="center"
          label="摘要"
          min-width="200px"
          prop="description"
        ></el-table-column>
        <!--创建人列-->
        <el-table-column align="center" :label="$t('Project.createUser')" min-width="150px">
          <template slot-scope="scope">
            <span>
              {{ scope.row.createdBy }}
            </span>
          </template>
        </el-table-column>
        <!--创建时间列-->
        <el-table-column
          align="center"
          :label="$t('Project.createTime')"
          min-width="250px"
          prop="createdDate"
        />
        <!--修改人列-->
        <el-table-column align="center" :label="$t('Project.modifyUser')" min-width="150px">
          <template slot-scope="scope">
            <span>
              {{
                $store.getters['user/getUserNameById'](scope.row.modifiedBy) || $t('result.unknown')
              }}
            </span>
          </template>
        </el-table-column>
        <!--修改时间列-->
        <el-table-column
          align="center"
          :label="$t('Project.modifyTime')"
          min-width="250px"
          prop="modifiedDate"
        />
        <!--更新次数列-->
        <el-table-column align="center" label="更新次数" min-width="150px" prop="updateCount" />
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!--是否删除列-->
        <el-table-column align="center" fixed="right" label="是否删除" min-width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.deleted === 1" class="tag-green">
              已删除
            </span>
            <span v-else class="tag-red">未删除</span>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="120px"
        >
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button
              v-if="$hasPer('view')"
              size="mini"
              type="text"
              @click="rowView(scope.$index, scope.row)"
            >
              <i class="el-icon-view el-icon--right"></i>
              {{ $t('button.view') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!--查看对话框-->
    <el-dialog
      v-if="viewDialogVisible"
      :append-to-body="true"
      center
      :title="$t('dialog.view')"
      :visible.sync="viewDialogVisible"
      width="70%"
    >
      <project-temp-model-view :input-data="currentEditRow" />
    </el-dialog>
  </BaseWrap>
</template>

<script>
import { projectTempModelList } from '@/api/quote/temp-model'
import ProjectTempModelView from './components/ProjectTempModelView'
export default {
  name: 'ProjectTempModel',
  components: { ProjectTempModelView },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 正在刷新
      isRefreshing: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        bu: '',
        model: '',
        number: '',
        pm: '',
        project: '',
        remind: '',
        series: '',
        deleted: '',
        tempModel: ''
      },
      // 查看对话框可见标识
      viewDialogVisible: false,
      // 当前行的数据
      currentEditRow: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.query()
    },
    // 查询表格数据
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const { data: res } = await projectTempModelList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = res.list
        this.total = res.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 行记录查看 */
    rowView(index, row) {
      this.currentEditRow = row
      this.viewDialogVisible = true
    }
  }
}
</script>

<style scoped lang="less"></style>
